<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户服务 - 校园互助系统</title>
    <style>
        body { background: #f5f5f5; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .container { max-width: 900px; margin: 0 auto; padding: 30px 10px; }
        header { text-align: center; margin-bottom: 30px; }
        h1 { color: #4285f4; margin-bottom: 0.5rem; }
        .user-info { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 24px; margin-bottom: 24px; }
        .user-info-row { margin-bottom: 10px; }
        .user-info-label { color: #888; margin-right: 8px; }
        .btn { display: inline-block; background-color: #4285f4; color: white; padding: 8px 18px; border-radius: 4px; text-decoration: none; border: none; cursor: pointer; transition: background 0.2s; }
        .btn:hover { background: #3367d6; }
        .btn-logout { background: #ea4335; margin-left: 16px; }
        .btn-logout:hover { background: #c62828; }
        .section { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 24px; margin-bottom: 24px; }
        .section-title { color: #4285f4; font-size: 1.2rem; margin-bottom: 12px; }
        .task-list { margin: 0; padding: 0; list-style: none; }
        .task-item { border-bottom: 1px solid #f0f0f0; padding: 12px 0; }
        .task-item:last-child { border-bottom: none; }
        .task-title { font-weight: bold; color: #4285f4; }
        .task-meta { color: #888; font-size: 0.95rem; margin-top: 2px; }
        .empty-state { color: #aaa; text-align: center; padding: 20px 0; }
        .nav { display: flex; justify-content: center; background: #fff; padding: 10px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.07); margin-bottom: 30px; }
        .nav a { color: #202124; text-decoration: none; padding: 8px 16px; margin: 0 5px; border-radius: 4px; transition: background 0.3s; }
        .nav a:hover, .nav a.active { background-color: #f8f9fa; color: #4285f4; }
        .nav a.active { font-weight: bold; }
    </style>
</head>
<body>
    <header>
        <h1>用户服务中心</h1>
        <div class="nav">
            <a href="/campus-help/" class="nav-link">首页</a>
            <a href="/campus-help/user.html" class="nav-link active">用户服务</a>
            <a href="/campus-help/tasks.html" class="nav-link">任务管理</a>
        </div>
    </header>
    <div class="container">
        <div class="user-info" id="user-info">
            <div class="user-info-row"><span class="user-info-label">学号:</span><span id="user-studentId"></span></div>
            <div class="user-info-row"><span class="user-info-label">姓名:</span><span id="user-name"></span></div>
            <div class="user-info-row"><span class="user-info-label">电话:</span><span id="user-phone"></span></div>
            <div class="user-info-row"><span class="user-info-label">邮箱:</span><span id="user-email"></span></div>
            <button class="btn btn-logout" id="logout-btn">退出登录</button>
        </div>
        <div class="section">
            <div class="section-title">我接受的任务</div>
            <ul class="task-list" id="accept-tasks-list"></ul>
            <div class="empty-state" id="accept-tasks-empty" style="display:none;">暂无接受的任务</div>
        </div>
        <div class="section">
            <div class="section-title">我发布的任务</div>
            <ul class="task-list" id="publish-tasks-list"></ul>
            <div class="empty-state" id="publish-tasks-empty" style="display:none;">暂无发布的任务</div>
        </div>
    </div>
    <script>
        // 登录校验
        const user = JSON.parse(sessionStorage.getItem('user') || 'null');
        if (!user) {
            window.location.href = 'login.html';
        }
        // 显示用户信息
        document.getElementById('user-studentId').innerText = user.studentId;
        document.getElementById('user-name').innerText = user.name || '-';
        document.getElementById('user-phone').innerText = user.phone || '-';
        document.getElementById('user-email').innerText = user.email || '-';
        // 退出登录
        document.getElementById('logout-btn').onclick = function() {
            sessionStorage.removeItem('user');
            localStorage.removeItem('studentId');
            window.location.href = 'login.html';
        };
        // 加载我接受的任务
        fetch(`/campus-help/api/tasks/list/acceptor/${user.studentId}`)
            .then(res => res.json())
            .then(data => {
                if (data.success && Array.isArray(data.data) && data.data.length > 0) {
                    document.getElementById('accept-tasks-empty').style.display = 'none';
                    renderTaskList('accept-tasks-list', data.data);
                } else {
                    document.getElementById('accept-tasks-empty').style.display = 'block';
                }
            });
        // 加载我发布的任务
        fetch(`/campus-help/api/tasks/list/publisher/${user.studentId}`)
            .then(res => res.json())
            .then(data => {
                if (data.success && Array.isArray(data.data) && data.data.length > 0) {
                    document.getElementById('publish-tasks-empty').style.display = 'none';
                    renderTaskList('publish-tasks-list', data.data);
                } else {
                    document.getElementById('publish-tasks-empty').style.display = 'block';
                }
            });
        // 渲染任务列表
        function renderTaskList(listId, tasks) {
            const list = document.getElementById(listId);
            list.innerHTML = '';
            tasks.forEach(task => {
                let statusText = '待接受';
                if (task.status === 'ACCEPTED') statusText = '进行中';
                else if (task.status === 'COMPLETED') statusText = '已完成';
                list.innerHTML += `<li class='task-item'><div class='task-title'>${task.title}</div><div class='task-meta'>报酬: ¥${task.reward} | 截止: ${task.deadline ? new Date(task.deadline).toLocaleString('zh-CN') : ''} | 状态: ${statusText}</div></li>`;
            });
        }
    </script>
</body>
</html> 